<template>
	<view class="login-page">
		<view>
			<view class="login-title">
				手机号码快速登录
			</view>

			<form action="">
				<view class="uni-forms-item">
					<input v-model="phoneNumber" type="text" placeholder="请输入手机号" class="login-input" />
				</view>
				<view class="uni-forms-item">
					<input v-model="verificationCode" type="text" placeholder="请输入验证码" class="login-input" />
					<text :disabled="isCounting" @click="sendVerificationCode"
						class="verify-btn">{{ countdownText }}</text>
				</view>
				<button type="default" class="login-btn" @click="login">登 录</button>
			</form>

		</view>
		<view class="agreement">
			登录即代表同意<navigator url="">用户协议</navigator>
		</view>
		<view class="login-other">
			<view class="other-title">其他登录方式</view>
			<view class="other-list">
				<view class="other-item" @click="loginByWeChat">
					<view class="other-icon"><uni-icons type="weixin" size="30"></uni-icons></view>
					<text>微信</text>
				</view>
				<view class="other-item">
					<view class="other-icon"><uni-icons type="weibo" size="30"></uni-icons></view>
					<text>微博</text>
				</view>
				<view class="other-item">
					<view class="other-icon"><uni-icons type="qq" size="30"></uni-icons></view>
					<text>QQ</text>
				</view>

			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';

	const phoneNumber = ref('');
	const verificationCode = ref('');
	const isCounting = ref(false);
	const secondsRemaining = ref(60); // 倒计时时间，单位为秒
	const countdownText = ref('获取验证码');

	const sendVerificationCode = async () => {
		if (isCounting.value) return;

		const phonePattern = /^1[3-9]\d{9}$/;
		if (!phonePattern.test(phoneNumber.value)) {
			alert('请输入正确的手机号码');
			return;
		}

		// 修改：实际发送验证码请求
		console.log('Sending verification code...');
		uni.request({
			url: 'http://localhost:9100/api/user/sendVerificationCode', //真实接口地址。
			data: {
				phone: phoneNumber.value
			},
			success: (res) => {
				console.log(res)
				if (res.data.code == 200) {
					uni.showToast({
						title: '短信码已发送',
						duration: 2000
					});
				} else {
					uni.showToast({
						title: '发送验证码失败，请稍后再试',
						duration: 2000
					});
				}
			}
		});

		// 开始倒计时
		isCounting.value = true;
		let timer = setInterval(() => {
			secondsRemaining.value -= 1;
			countdownText.value = `${secondsRemaining.value} s `;

			if (secondsRemaining.value <= 0) {
				clearInterval(timer);
				resetCountdown();
			}
		}, 1000);
	};

	const resetCountdown = () => {
		isCounting.value = false;
		secondsRemaining.value = 60;
		countdownText.value = '再次获取';
	};

	const login = async () => {
		uni.request({
			method: 'POST',
			url: 'http://localhost:9100/api/user/loginByPhone', //真实接口地址。
			data: {
				phone: phoneNumber.value,
				verificationCode: verificationCode.value
			},
			success: (res) => {
				console.log(res)
				if (res.data.code == 200) {
					uni.showToast({
						title: '登录成功',
						duration: 2000
					});
					uni.setStorageSync('bece_token', res.data.data.token);
					console.log('bece_token: ' + uni.getStorageSync('bece_token'));
					uni.switchTab({
						url: '/pages/home/home'
					});
				} else {
					uni.showToast({
						title: res.data.msg,
						duration: 2000
					});
				}
			}
		});
	};

	const loginByWeChat = () => {
		console.log("微信登录成功");
	};
</script>

<style>
	.login-page {
		padding: 0 60rpx;
	}

	.login-title {
		margin-top: 100rpx;
		margin-bottom: 100rpx;
		text-align: center;
		font-size: 34rpx;
	}

	.login-input {
		padding: 20rpx 0;
		font-size: 28rpx;
		border-bottom: 4rpx solid #666ee8;
	}

	.uni-forms-item {
		position: relative;
		margin-bottom: 10rpx;
	}

	.verify-btn {
		position: absolute;
		top: 20rpx;
		right: 4rpx;
		font-size: 24rpx;
		color: #666ee8;
	}

	.login-btn {
		margin-top: 60rpx;
		color: #fff !important;
		background-color: #666ee8 !important;
		border-radius: 100rpx;
	}

	.agreement {
		margin-top: 35rpx;
		font-size: 24rpx;
		text-align: center;
		color: #ccc;
	}

	.agreement navigator {
		display: inline;
		color: #666EE8;
		text-decoration: underline;
	}

	.login-other {
		margin-top: 300rpx;
	}

	.other-title {
		margin-bottom: 60rpx;
		font-size: 30rpx;
		text-align: center;
	}

	.other-list {
		display: flex;
		justify-content: space-between;
	}

	.other-item {
		font-size: 26rpx;
		text-align: center;
	}

	.other-icon {
		width: 64rpx;
		height: 64rpx;
		margin-bottom: 6rpx;
		line-height: 60rpx;
		font-size: 36rpx;

		border-radius: 50%;
	}
</style>